<template>
	<section style="width:100%">
		<el-tabs v-model="userDefault" type="card" @tab-click="handleClick" style="margin-top: 10px">
			<el-tab-pane label="付费活跃统计" name="0">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" :model="filters">
						<el-form-item label="游戏平台">
							<el-select v-model="roomValue" placeholder="请选择">
								<el-option
										v-for="item in room"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="getUsers">查询</el-button>
						</el-form-item>
					</el-form>
					</el-col>
					<el-table :data="users" stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="(1日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(3日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(7日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(30日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(1日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="(3日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="(7日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="(30日)赠送" width="110">
						</el-table-column>
						<el-table-column prop="name" label="1日">
						</el-table-column>
						<el-table-column prop="name" label="3日">
						</el-table-column>
						<el-table-column prop="name" label="7日">
						</el-table-column>
						<el-table-column prop="name" label="30日">
						</el-table-column>
						<el-table-column prop="name" label="(新增)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(新增)赠送" width="110">
						</el-table-column>
						<el-table-column prop="name" label="新增">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
			<el-tab-pane label="付费1日统计"  name="1">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" :model="filters">
						<el-form-item label="游戏平台">
							<el-select v-model="roomValue" placeholder="请选择">
								<el-option
										v-for="item in room"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="value1"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="getUsers">查询</el-button>
						</el-form-item>
					</el-form>
					</el-col>
					<el-table :data="users"  stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="(1日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(1日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="1日">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
			<el-tab-pane label="付费3日统计"  name="2">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
						<el-form :inline="true" :model="filters">
							<el-form-item label="游戏平台">
								<el-select v-model="roomValue" placeholder="请选择">
									<el-option
											v-for="item in room"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="开始时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" v-on:click="getUsers">查询</el-button>
							</el-form-item>
						</el-form>
					</el-col>
					<el-table :data="users" stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="(3日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(3日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="3日">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
			<el-tab-pane label="付费7日统计"  name="3">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
						<el-form :inline="true" :model="filters">
							<el-form-item label="游戏平台">
								<el-select v-model="roomValue" placeholder="请选择">
									<el-option
											v-for="item in room"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="开始时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" v-on:click="getUsers">查询</el-button>
							</el-form-item>
						</el-form>
					</el-col>
					<el-table :data="users" stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="(7日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(7日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="7日">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
			<el-tab-pane label="付费30日统计"  name="4">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
						<el-form :inline="true" :model="filters">
							<el-form-item label="游戏平台">
								<el-select v-model="roomValue" placeholder="请选择">
									<el-option
											v-for="item in room"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="开始时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" v-on:click="getUsers">查询</el-button>
							</el-form-item>
						</el-form>
					</el-col>
					<el-table :data="users" stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="(30日)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(30日)赠送">
						</el-table-column>
						<el-table-column prop="name" label="30日">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
			<el-tab-pane label="新增付费"  name="5">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
						<el-form :inline="true" :model="filters">
							<el-form-item label="游戏平台">
								<el-select v-model="roomValue" placeholder="请选择">
									<el-option
											v-for="item in room"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="开始时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间">
								<el-date-picker
										v-model="value1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" v-on:click="getUsers">查询</el-button>
							</el-form-item>
						</el-form>
					</el-col>
					<el-table :data="users" stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="name" label="(新增)IOS">
						</el-table-column>
						<el-table-column prop="name" label="(新增)赠送">
						</el-table-column>
						<el-table-column prop="name" label="新增">
						</el-table-column>
					</el-table>
					<el-col :span="24" class="toolbar">
						<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
						</el-pagination>
					</el-col>
				</section>
			</el-tab-pane>
		</el-tabs>

	</section>
</template>

<script>
	import util from '../../common/js/util'
    import echarts from 'echarts'
	//import NProgress from 'nprogress'
	// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
    import Page4 from "../nav2/Page4";

	export default {
        components: {Page4},
        data() {
			return {
                editRoomVisible:false,
                roomNameValue:'',
                editRoom:[],
                roomName:[],
                governVisible:false,
                govern:[],
                governValue:'',
                controlVisible:false,
                historyVisible:false,
				filters: {
					name: ''
				},
				users: [],
                userDefault: '0',
                chartLine: null,
				total: 100,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
                editableTabs: [
                    {
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }
                ],
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},
                room: [
                    {
                    value: '1',
                    label: '游戏房间ID'
                }, {
                    value: '2',
                    label: '房间名称'
                }
                ],
                roomValue: '1',
                systemState: [
                    {
                        value: '1',
                        label: '系统吃分'
                    }, {
                        value: '2',
                        label: '系统吐分'
                    }
                ],
                systemValue: '1',
                bunko: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '输'
                    }, {
                        value: '2',
                        label: '赢'
                    }
                ],
                bunkoValue: '0'
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
                let para = {
                    page: this.page,
                    name: this.filters.name
                };
                this.listLoading = true;
                //NProgress.start();
                getUserListPage(para).then((res) => {
                    this.total = res.data.total;
                    this.users = res.data.users;
                    this.listLoading = false;
                    //NProgress.done();
                });
            }
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped lang="stylus">
</style>